<template>
  <div class="hospital-smart-screen">
    <!-- 顶部信息栏 -->
    <header class="header">
      <div class="hospital-info">
        <div class="logo-placeholder" v-if="!hospitalLogo">
          <svg viewBox="0 0 24 24" class="hospital-icon">
            <path fill="#FFFFFF" d="M18,14H14V18H10V14H6V10H10V6H14V10H18M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" />
          </svg>
        </div>
        <img :src="hospitalLogo" alt="医院logo" class="logo" v-else>
        <h1>{{ hospitalName }}</h1>
      </div>
      <div class="datetime-weather">
        <div class="date">{{ currentDate }}</div>
        <div class="time">{{ currentTime }}</div>
        <div class="weather">
          <span>{{ weatherInfo.temperature }}°C</span>
          <span>{{ weatherInfo.weather }}</span>
          <svg class="weather-icon" viewBox="0 0 24 24" v-if="weatherInfo.weather === '晴'">
            <path fill="#FFD700" d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z"/>
          </svg>
          <svg class="weather-icon" viewBox="0 0 24 24" v-else-if="weatherInfo.weather === '阴'">
            <path fill="#B0C4DE" d="M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13Z"/>
          </svg>
          <svg class="weather-icon" viewBox="0 0 24 24" v-else>
            <path fill="#4682B4" d="M12,3.25C12,3.25 6,10 6,14C6,17.32 8.69,20 12,20A6,6 0 0,0 18,14C18,10 12,3.25 12,3.25M14.47,9.97L15.53,11.03L9.53,17.03L8.47,15.97M9.75,10A1.25,1.25 0 0,1 11,11.25A1.25,1.25 0 0,1 9.75,12.5A1.25,1.25 0 0,1 8.5,11.25A1.25,1.25 0 0,1 9.75,10M14.25,14.5A1.25,1.25 0 0,1 15.5,15.75A1.25,1.25 0 0,1 14.25,17A1.25,1.25 0 0,1 13,15.75A1.25,1.25 0 0,1 14.25,14.5Z"/>
          </svg>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 左侧挂号信息区 -->
      <div class="register-section">
        <div class="section-header">
          <svg viewBox="0 0 24 24" class="section-icon">
            <path fill="#1e88e5" d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7Z" />
          </svg>
          <h2>挂号信息</h2>
        </div>
        
        <div class="register-stats">
          <div class="stat-card">
            <div class="stat-value">{{ registerStats.total }}</div>
            <div class="stat-label">总挂号量</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">{{ registerStats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">{{ registerStats.waiting }}</div>
            <div class="stat-label">候诊中</div>
          </div>
        </div>
        
        <div class="department-waiting">
          <h3>科室候诊情况</h3>
          <div class="department-grid">
            <div v-for="(dept, idx) in departmentRegister" :key="idx" class="department-card">
              <div class="dept-name">{{ dept.name }}</div>
              <div class="dept-waiting">
                <span class="waiting-number">{{ dept.waiting }}</span>
                <span class="waiting-text">人候诊</span>
              </div>
              <div class="dept-avg-time">平均等待: {{ dept.avgWaitTime }}分钟</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中间医生信息区 -->
      <div class="doctor-section">
        <div class="section-header">
          <svg viewBox="0 0 24 24" class="section-icon">
            <path fill="#1e88e5" d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" />
          </svg>
          <h2>值班医生</h2>
        </div>
        
        <div class="doctor-list">
          <div v-for="(doctor, idx) in todayDoctors" :key="idx" class="doctor-card">
            <div class="avatar-placeholder" v-if="!doctor.avatar">
              <svg viewBox="0 0 24 24" class="default-avatar">
                <path fill="#1e88e5" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
              </svg>
            </div>
            <img :src="doctor.avatar" alt="医生照片" class="doctor-avatar" v-else>
            <div class="doctor-details">
              <h3>{{ doctor.name }}</h3>
              <p class="dept">{{ doctor.department }} | {{ doctor.title }}</p>
              <p class="specialty">擅长: {{ doctor.specialty }}</p>
              <p class="schedule">坐诊时间: {{ doctor.schedule }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧排队叫号区 -->
      <div class="queue-section">
        <div class="section-header">
          <svg viewBox="0 0 24 24" class="section-icon">
            <path fill="#1e88e5" d="M20,15.5C18.8,15.5 17.5,15.3 16.4,14.9C16.3,14.9 16.2,14.9 16.1,14.9C15.8,14.9 15.6,15 15.4,15.2L13.2,17.4C10.4,15.9 8,13.6 6.6,10.8L8.8,8.6C9.1,8.3 9.2,7.9 9,7.6C8.7,6.5 8.5,5.2 8.5,4C8.5,3.5 8,3 7.5,3H4C3.5,3 3,3.5 3,4C3,13.4 10.6,21 20,21C20.5,21 21,20.5 21,20V16.5C21,16 20.5,15.5 20,15.5M19,12H22V3H12V6H19V12Z" />
          </svg>
          <h2>叫号信息</h2>
        </div>
        
        <div class="current-call">
          <div class="call-icon">
            <svg viewBox="0 0 24 24">
              <path fill="#0d47a1" d="M20,15.5C18.8,15.5 17.5,15.3 16.4,14.9C16.3,14.9 16.2,14.9 16.1,14.9C15.8,14.9 15.6,15 15.4,15.2L13.2,17.4C10.4,15.9 8,13.6 6.6,10.8L8.8,8.6C9.1,8.3 9.2,7.9 9,7.6C8.7,6.5 8.5,5.2 8.5,4C8.5,3.5 8,3 7.5,3H4C3.5,3 3,3.5 3,4C3,13.4 10.6,21 20,21C20.5,21 21,20.5 21,20V16.5C21,16 20.5,15.5 20,15.5M19,12H22V3H12V6H19V12Z" />
            </svg>
          </div>
          <div class="call-info" v-if="currentCall">
            <p class="patient-name">{{ currentCall.patientName }}</p>
            <p class="call-detail">
              请到 <span class="room">{{ currentCall.room }}</span> 就诊
            </p>
            <p class="doctor">医生: {{ currentCall.doctor }}</p>
          </div>
          <div class="no-call" v-else>
            当前无叫号信息
          </div>
        </div>
        
        <div class="waiting-queue">
          <h3>候诊队列</h3>
          <div class="queue-list">
            <div v-for="(item, idx) in waitingQueue" :key="idx" class="queue-item">
              <span class="queue-number">{{ item.queueNumber }}</span>
              <span class="patient">{{ item.patientName }}</span>
              <span class="dept">{{ item.department }}</span>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部公告区 -->
    <footer class="announcement-footer">
      <div class="section-header">
        <svg viewBox="0 0 24 24" class="section-icon">
          <path fill="#1e88e5" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
        </svg>
        <h2>医院公告</h2>
      </div>
      
      <div class="announcement-list">
        <div v-for="(item, idx) in announcements" :key="idx" class="announcement-item">
          <h3>{{ item.title }}</h3>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.time }}</p>
        </div>
      </div>
      
      <div class="scroll-text">
        <marquee behavior="scroll" direction="left">
          {{ scrollText }}
        </marquee>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  name: 'HospitalSmartScreen',
  setup() {
    // 医院信息
    const hospitalName = ref('XX市第一人民医院');
    const hospitalLogo = ref('');
    
    // 日期时间
    const currentDate = ref('');
    const currentTime = ref('');
    let timeInterval = null;
    
    // 天气信息
    const weatherInfo = ref({
      temperature: 26,
      weather: '晴'
    });
    
    // 挂号信息
    const registerStats = ref({
      total: 1245,
      completed: 876,
      waiting: 369
    });
    
    const departmentRegister = ref([
      { name: '内科', waiting: 45, avgWaitTime: 25 },
      { name: '外科', waiting: 32, avgWaitTime: 18 },
      { name: '儿科', waiting: 28, avgWaitTime: 30 },
      { name: '妇产科', waiting: 22, avgWaitTime: 20 },
      { name: '眼科', waiting: 15, avgWaitTime: 15 },
      { name: '耳鼻喉科', waiting: 12, avgWaitTime: 12 },
      { name: '口腔科', waiting: 8, avgWaitTime: 10 },
      { name: '皮肤科', waiting: 18, avgWaitTime: 15 }
    ]);
    
    // 医生信息
    const todayDoctors = ref([
      {
        name: '张医生',
        department: '内科',
        title: '主任医师',
        specialty: '心血管疾病、高血压',
        schedule: '周一至周五 8:00-12:00',
        avatar: ''
      },
      {
        name: '李医生',
        department: '外科',
        title: '副主任医师',
        specialty: '微创手术、腹腔镜手术',
        schedule: '周一、三、五 8:00-17:00',
        avatar: ''
      },
      {
        name: '王医生',
        department: '儿科',
        title: '主治医师',
        specialty: '儿童常见病、儿童保健',
        schedule: '周二、四、六 8:00-12:00',
        avatar: ''
      },
      {
        name: '赵医生',
        department: '妇产科',
        title: '副主任医师',
        specialty: '妇科疾病、产科护理',
        schedule: '周一至周六 8:00-12:00',
        avatar: ''
      }
    ]);
    
    // 公告信息
    const announcements = ref([
      {
        title: '关于冬季流感疫苗接种的通知',
        content: '我院现已开始冬季流感疫苗接种工作，请有需要的市民前来接种。',
        time: '2023-11-15'
      },
      {
        title: '门诊时间调整公告',
        content: '自2023年12月1日起，我院门诊时间调整为8:00-17:30，请广大患者注意。',
        time: '2023-11-10'
      },
      {
        title: '新引进核磁共振设备',
        content: '我院最新引进3.0T核磁共振设备，现已投入使用，欢迎有需要的患者预约检查。',
        time: '2023-10-25'
      }
    ]);
    
    // 叫号信息
    const currentCall = ref({
      patientName: '张三',
      room: '内科诊室3',
      doctor: '张医生'
    });
    
    const waitingQueue = ref([
      { queueNumber: 'A012', patientName: '李四', department: '内科' },
      { queueNumber: 'A013', patientName: '王五', department: '外科' },
      { queueNumber: 'A014', patientName: '赵六', department: '儿科' },
      { queueNumber: 'A015', patientName: '钱七', department: '妇产科' },
      { queueNumber: 'A016', patientName: '孙八', department: '眼科' },
      { queueNumber: 'A017', patientName: '周九', department: '耳鼻喉科' },
      { queueNumber: 'A018', patientName: '吴十', department: '口腔科' }
    ]);
    
    // 滚动文字
    const scrollText = ref('温馨提示：请保管好您的随身物品，就诊时请携带身份证和医保卡。医院咨询电话：12345678。');
    
    // 更新时间
    const updateTime = () => {
      const now = new Date();
      currentDate.value = now.toLocaleDateString('zh-CN', { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric',
        weekday: 'long'
      });
      currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false });
    };
    
    onMounted(() => {
      updateTime();
      timeInterval = setInterval(updateTime, 1000);
      
      // 模拟叫号更新
      setInterval(() => {
        if(waitingQueue.value.length > 0) {
          currentCall.value = {
            patientName: waitingQueue.value[0].patientName,
            room: Math.floor(Math.random() * 5) + 1 + '号诊室',
            doctor: todayDoctors.value[Math.floor(Math.random() * todayDoctors.value.length)].name
          };
          waitingQueue.value.shift();
        } else {
          currentCall.value = null;
        }
      }, 10000);
    });
    
    onBeforeUnmount(() => {
      clearInterval(timeInterval);
    });
    
    return {
      hospitalName,
      hospitalLogo,
      currentDate,
      currentTime,
      weatherInfo,
      registerStats,
      departmentRegister,
      todayDoctors,
      announcements,
      currentCall,
      waitingQueue,
      scrollText
    };
  }
};
</script>

<style scoped>
.hospital-smart-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #1e88e5;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hospital-info {
  display: flex;
  align-items: center;
}

.logo-placeholder {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hospital-icon {
  width: 40px;
  height: 40px;
}

.logo {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.datetime-weather {
  display: flex;
  align-items: center;
  font-size: 18px;
}

.date, .time {
  margin-right: 20px;
}

.weather {
  display: flex;
  align-items: center;
}

.weather-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}

.main-content {
  flex: 1;
  display: flex;
  padding: 15px;
  gap: 15px;
  overflow: hidden;
}

.register-section, .doctor-section, .queue-section {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.register-section {
  flex: 0 0 30%;
}

.doctor-section {
  flex: 1;
}

.queue-section {
  flex: 0 0 25%;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3f2fd;
}

.section-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.section-header h2 {
  margin: 0;
  color: #1e88e5;
}

.register-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-card {
  background-color: #e3f2fd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  flex: 1;
  margin: 0 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #0d47a1;
}

.stat-label {
  font-size: 14px;
  color: #555;
}

.department-waiting {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.department-waiting h3 {
  color: #555;
  margin: 0 0 10px 0;
}

.department-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}

.department-card {
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dept-name {
  font-weight: bold;
  margin-bottom: 5px;
  color: #0d47a1;
}

.dept-waiting {
  margin-bottom: 5px;
}

.waiting-number {
  font-size: 20px;
  font-weight: bold;
  color: #e53935;
}

.waiting-text {
  font-size: 12px;
  color: #555;
}

.dept-avg-time {
  font-size: 12px;
  color: #555;
}

.doctor-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  overflow-y: auto;
  flex: 1;
}

.doctor-card {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s;
}

.doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.default-avatar {
  width: 60px;
  height: 60px;
}

.doctor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 3px solid #bbdefb;
}

.doctor-details {
  flex: 1;
}

.doctor-details h3 {
  margin: 0 0 5px 0;
  color: #0d47a1;
}

.doctor-details p {
  margin: 3px 0;
  font-size: 14px;
  color: #555;
}

.current-call {
  background-color: #e3f2fd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  text-align: center;
}

.call-icon {
  margin-bottom: 10px;
}

.call-icon svg {
  width: 40px;
  height: 40px;
}

.call-info .patient-name {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #0d47a1;
}

.call-info .call-detail {
  font-size: 16px;
  margin: 0 0 10px 0;
}

.call-info .room {
  font-weight: bold;
  color: #e53935;
}

.call-info .doctor {
  font-size: 14px;
  margin: 0;
  color: #555;
}

.no-call {
  font-size: 16px;
  color: #888;
}

.waiting-queue {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.waiting-queue h3 {
  color: #555;
  margin: 0 0 10px 0;
}

.queue-list {
  flex: 1;
  overflow-y: auto;
}

.queue-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.queue-number {
  width: 50px;
  font-weight: bold;
  color: #0d47a1;
}

.patient {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dept {
  width: 70px;
  text-align: right;
  font-size: 12px;
  color: #888;
}

.announcement-footer {
  background-color: white;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.announcement-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 15px 0;
}

.announcement-item {
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 10px;
}

.announcement-item h3 {
  margin: 0 0 8px 0;
  color: #0d47a1;
  font-size: 16px;
}

.announcement-item .content {
  margin: 0 0 5px 0;
  color: #555;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-item .time {
  margin: 0;
  font-size: 12px;
  color: #888;
  text-align: right;
}

.scroll-text {
  background-color: #0d47a1;
  color: white;
  padding: 8px 15px;
  border-radius: 4px;
}

.scroll-text marquee {
  font-size: 16px;
}
</style>